<template>
     <el-table :data="items" stripe style="width: 100%">
    <el-table-column prop="itemId" label="Item Id" width="180" />
    <el-table-column prop="productId" label="Product Id" width="180" />
    <el-table-column prop="listPrice" label="List Price" width="180"/>
    <el-table-column prop="unitCost" label="Unit Cost" width="180"/>
    <el-table-column prop="supplierId" label="Supplier Id" width="180"/>
  </el-table>
  
<!-- <ItemCard
              :title="product.name"
              :supplier="product.supplierId"
              :image="product.image"
              :productId="product.id"
            /> -->
</template>

<script>
import ItemCard from '../components/ItemCard.vue';
import { ref } from '@vue/reactivity'
import axios from 'axios';
import { reactive } from 'vue';
import { onMounted } from '@vue/runtime-core';
import router from '../router';
export default {
    name: "items",
    components: {ItemCard},
    setup() {
        
        const items = ref([])
        const getItems = () => {
            return axios.get("/item/items").then(res => {
                console.log("mark!!"+res);
                 return res; 
            }).catch(e => {
                return e.res.data;
            })
        }
        const redirect = (productid) => {
            console.log("/item/" + productid);
            router.push({ path: "/item/" + productid });
        }
        onMounted(async () => {
           
            const resdata = await getItems();
            console.log(resdata);
            items.value = resdata.data.data;
        })
        return {
            items
        }
    }
};
</script>